@charset "utf-8";
@import "reset";
$fs:64px;
html{
    font-size: $fs;
}
@function r($px){
    @return $px/$fs*1rem; 
}
section{
    width: r(583px);
    margin: 0 auto;
    .demo-wrap{
        margin-top: r(20px);
        .demo{
            width: r(282px);
            background: #f6f6f6;
            .demo-t{
                width: r(282px);
                height: r(182px);
                img{
                    width: r(282px);
                    }
             }   
           .demo-b{
               margin-top: r(15px);
               h2{  
                   display: block;
                    font-size: r(22px);
                    color: #000;
                    font-weight: normal;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                } 
                p{
                    font-size: 0;
                    font-size: r(20px);
                    color: #c5c5c5;
                    margin-top: r(15px);
                    span{
                        font-size: r(18px);
                        color: #fff;
                        padding: r(5px) r(26px);
                        background: #b20000;
                        border-radius: r(4px);
                        margin-left: r(7px);
                    }
                    i{
                        vertical-align: middle;
                        margin-left: r(7px);
                    }
                } 
               div{
                   font-size: r(18px);
                   color: #c5c5c5;
                   margin-top: r(14px);
                    >img{
                        width: r(30px);
                        height: r(30px);
                        vertical-align: middle;
                    }
                } 
           }
        }
    }
}
